<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/edit.css">
    <link rel="stylesheet" href="blog-editormd/css/editormd.css" />
    <!-- 使用Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

</head>
<!-- -->
<body>
    <div class="nav">
        <img src="pic/logo2.jpg" alt="">
        <span class="blog-title">我的博客系统</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html"><i class="fas fa-home"></i> 主页</a>
        <a class="nav-span" href="blog_edit.html"><i class="fas fa-edit"></i> 写博客</a>
        <a class="nav-span" href="#" onclick="logout()"><i class="fas fa-sign-out-alt"></i> 注销</a>
    </div>
    <div class="content-edit">
        <div class="edit-header">
            <h2><i class="fas fa-pen-fancy"></i> 创作新文章</h2>
            <a href="blog_list.html" class="back-link"><i class="fas fa-arrow-left"></i> 返回列表</a>
        </div>
        <div class="push">
            <div class="title-area">
                <label for="title"><i class="fas fa-heading"></i> 文章标题</label>
                <input type="text" name="title" id="title" placeholder="请输入文章标题...">
            </div>
            <button id="submit" onclick="submit()"><i class="fas fa-paper-plane"></i> 发布文章</button>
        </div>
        <!-- markdown 插件 html代码 -->
        <div class="editor-container">
            <div id="editor">
                <textarea style="display:none;" id="content" name="content">## 在这里写下一篇博客

开始您的创作之旅...

- 支持Markdown语法
- 可以插入图片和链接
- 代码高亮显示

```javascript
// 示例代码
function helloWorld() {
    console.log("Hello, World!");
}
```</textarea>
            </div>
        </div>
        
        <div class="help-tips">
            <h3><i class="fas fa-lightbulb"></i> 编辑器使用提示</h3>
            <ul>
                <li>使用 <code># 文字</code> 来创建标题，# 的数量表示标题级别</li>
                <li>使用 <code>**文字**</code> 来创建粗体文本</li>
                <li>使用 <code>*文字*</code> 来创建斜体文本</li>
                <li>使用 <code>```代码```</code> 来插入代码块</li>
                <li>使用 <code>[链接文本](URL)</code> 来插入链接</li>
                <li>使用 <code>![图片描述](图片URL)</code> 来插入图片</li>
            </ul>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="blog-editormd/editormd.min.js"></script>
    <script src="js/common.js"></script>
    <script type="text/javascript">
        var editor;
        
        $(function () {
            editor = editormd("editor", {
                width: "100%",
                height: "500px",
                path: "blog-editormd/lib/",
                theme: "default",
                previewTheme: "default",
                editorTheme: "default",
                markdown: $("#content").val(),
                codeFold: true,
                saveHTMLToTextarea: true,
                searchReplace: true,
                watch: true,
                htmlDecode: "style,script,iframe",
                toolbar: true,
                toolbarAutoFixed: true,
                toolbarIcons: "full",
                emoji: true,
                taskList: true,
                tocm: true,
                tex: true,
                flowChart: true,
                sequenceDiagram: true,
                placeholder: "请开始您的创作...",
                onload: function() {
                    // 编辑器加载完成后的回调
                    console.log("Editor loaded successfully");
                }
            });
        });

        function submit() {
            var title = $("#title").val().trim();
            var content = editor.getMarkdown();
            
            if (!title) {
                showMessage("请输入文章标题", "error");
                return;
            }
            
            if (!content || content === "") {
                showMessage("文章内容不能为空", "error");
                return;
            }
            
            // 禁用按钮，防止重复提交
            $("#submit").prop("disabled", true).html('<i class="fas fa-spinner fa-spin"></i> 发布中...');
            
            $.ajax({
                type: "post",
                url: "/blog/add",
                contentType: "application/json",
                data: JSON.stringify({
                    "userId": localStorage.getItem("loginUserId"),
                    "title": title,
                    "content": content
                }),
                success: function (result) {
                    $("#submit").prop("disabled", false).html('<i class="fas fa-paper-plane"></i> 发布文章');
                    
                    if (result != null && result.code == 200 && result.data == true) {
                        showMessage("文章发布成功！", "success");
                        setTimeout(function() {
                            location.href = "blog_list.html";
                        }, 1500);
                    } else {
                        showMessage(result.errMsg || "发布失败，请重试", "error");
                    }
                },
                error: function(err) {
                    console.error("发布文章失败:", err);
                    $("#submit").prop("disabled", false).html('<i class="fas fa-paper-plane"></i> 发布文章');
                    showMessage("发布失败，请检查网络连接", "error");
                }
            });
        }
        
        function showMessage(message, type) {
            // 如果页面上已有消息框，先删除
            $(".message-box").remove();
            
            // 创建新的消息框
            var messageBox = $('<div class="message-box ' + type + '"><span>' + message + '</span></div>');
            $("body").append(messageBox);
            
            // 显示消息框
            setTimeout(function() {
                messageBox.addClass("show");
            }, 10);
            
            // 设置自动关闭
            setTimeout(function() {
                messageBox.removeClass("show");
                setTimeout(function() {
                    messageBox.remove();
                }, 300);
            }, 3000);
        }
    </script>
</body>

</html>